<template>
  <div id="foot">
    <div class="friend">
      <span class="title">友情链接:</span>
      <div class="wrapper">
         <el-link v-for="(item,index) in friendLink"
                  :underline="false"
                  :href="item.link"
                  style="margin: 0 20px;color: #fff"
                  :key="index">
        {{item.name}}
      </el-link>
      </div>
    </div>
    <div class="company">
      <span class="title">合作伙伴:</span>
      <div class="wrapper">
        <img v-for="(item,index) in company"
             :src="item"
        />
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "Footer",
    data(){
      return{
        friendLink:[
          {
            name:'人人律',
            link:'http://www.renrenlv.net/claproducts.aspx?FId=n28:28:3'
          },
          {
            name:'企业一站式',
            link:'http://www.renrenlv.net/teachers_complex.aspx?FId=n26:26:3'
          },
          {
            name:'找北京专业律师',
            link:'http://www.law114.com.cn/'
          },
          {
            name:'Landray蓝凌',
            link:'https://www.landray.com.cn/zhihuihetong'
          }
        ],
        company:[
          require('../../assets/images/合作伙伴1.png'),
          require('../../assets/images/合作伙伴2.png'),
          require('../../assets/images/合作伙伴3.png'),
          require('../../assets/images/合作伙伴4.png'),
          require('../../assets/images/合作伙伴5.png'),
          require('../../assets/images/合作伙伴6.png'),
          require('../../assets/images/合作伙伴7.png'),
          require('../../assets/images/合作伙伴8.png'),
          require('../../assets/images/合作伙伴9.png')
        ]
      }
    }

  }
</script>

<style scoped>
  #foot{
    width: 100%;
    color: #ffffff;
    background-color: #666666;
  }
  .friend,.company{
    margin: 0 auto;
    text-align: left;
    display: flex;
  }
  .title{
    width: 100px;
  }
  .friend{
    line-height: 100px;
    width: 1000px;
  }
  .company{
    width: 1000px;
  }
  .wrapper{
    display: flex;
    flex-wrap: wrap;
    width: 900px;
    margin: 0 20px;
  }
  .company .wrapper img{
    margin: 10px 20px;
  }
</style>